<template>
  <div class="task-container">
    <!-- 顶部层级 -->
    <header class="header">
      <h2>分解设计</h2>
      <div>
        <p class="current-dream">当前梦想: {{ currentDream || '暂无梦想' }}</p>
        <select v-model="selectedDreamId" @change="updateCurrentDream">
          <option value="">请选择梦想</option>
          <option v-for="dream in allDreams" :key="dream.id" :value="dream.id">{{ dream.name }} (ID: {{ dream.id }})</option>
        </select>
      </div>
    </header>

    <!-- 次级导航层 -->
    <nav class="nav">
      <router-link to="/dream">梦想描绘</router-link>
      <router-link to="/tasks">分解设计</router-link>
      <router-link to="/plan">制定计划</router-link>
      <router-link to="/execute">执行计划</router-link>
    </nav>

    <!-- 核心内容层 -->
    <main class="main-content">
      <div class="task-list">
        <h3>任务列表</h3>
        <ul>
          <li v-for="(task, index) in dreams" :key="index">
            <div>
              <p>任务名称: {{ task.taskName }}</p>
              <p>任务描述: {{ task.taskDescription }}</p>
              <p>进度序号: {{ task.progressIndex }}</p>
              <p>需要时间: {{ task.requiredTime }} 分钟</p>
              <p>实现功能: {{ task.functionality }}</p>
              <p>相关数据: {{ task.relatedData }}</p>
              <button @click="removeTask(task.xrwID)">删除</button>
            </div>
          </li>
        </ul>
      </div>

      <div class="task-input">
        <div class="input-group">
          <label>任务名称</label>
          <input v-model="newTask.taskName" placeholder="请输入任务名称" />
        </div>
        <div class="input-group">
          <label>任务描述</label>
          <input v-model="newTask.taskDescription" placeholder="请输入任务描述" />
        </div>
        <div class="input-group">
          <label>进度序号</label>
          <input v-model="newTask.progressIndex" type="number" placeholder="请输入数字(1,2,3...)" />
        </div>
        <div class="input-group">
          <label>需要时间(分钟)</label>
          <input v-model="newTask.requiredTime" type="number" placeholder="请输入分钟数" />
        </div>
        <div class="input-group">
          <label>实现功能</label>
          <input v-model="newTask.functionality" placeholder="请输入实现的功能" />
        </div>
        <div class="input-group">
          <label>相关数据</label>
          <input v-model="newTask.relatedData" placeholder="请输入相关数据" />
        </div>
        <button @click="addTask">添加任务</button>
      </div>
    </main>

    <!-- 底部固定层 -->
    <footer class="footer">
      <p>© 2025 22215120229罗智韬 为梦成真开发者</p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDream: localStorage.getItem('dream') || '',
      currentDreamId: localStorage.getItem('dreamId') || '',
      selectedDreamId: localStorage.getItem('dreamId') || '',
      allDreams: [],
      dreams: [],
      newTask: {
        xrwID: 0,
        taskName: '',
        taskDescription: '',
        progressIndex: 0,
        requiredTime: 0,
        functionality: '',
        relatedData: '',
        dreamId: localStorage.getItem('dreamId') || ''
      }
    }
  },
  methods: {
    addTask() {
      if (this.newTask.taskName && this.newTask.taskDescription && this.newTask.progressIndex && this.newTask.requiredTime && this.newTask.functionality && this.newTask.relatedData) {
        this.dreams.push({ ...this.newTask, xrwID: Date.now(), dreamId: String(this.selectedDreamId) })
        this.saveTasks()
        this.newTask = {
          xrwID: 0,
          taskName: '',
          taskDescription: '',
          progressIndex: 0,
          requiredTime: 0,
          functionality: '',
          relatedData: '',
          dreamId: String(this.selectedDreamId)
        }
      }
    },
    removeTask(id) {
      const index = this.dreams.findIndex(task => task.xrwID === id)
      if (index !== -1) {
        this.dreams.splice(index, 1)
        this.saveTasks()
      }
    },
    saveTasks() {
      const allTasks = JSON.parse(localStorage.getItem('tasks') || '[]')
      const otherTasks = allTasks.filter(task => task.dreamId !== this.selectedDreamId)
      localStorage.setItem('tasks', JSON.stringify([...otherTasks, ...this.dreams]))
    },
    updateCurrentDream() {
      // 每次选择时重新从localStorage加载最新的梦想数据
      const savedDreams = localStorage.getItem('dreams')
      if (savedDreams) {
        try {
          this.allDreams = JSON.parse(savedDreams)
        } catch (e) {
          console.error('解析dreams数据失败:', e)
          this.allDreams = []
        }
      }
      const selectedDream = this.allDreams.find(dream => String(dream.id) === String(this.selectedDreamId))
      this.currentDream = selectedDream ? selectedDream.dream : ''
      this.currentDreamId = this.selectedDreamId
      localStorage.setItem('dream', this.currentDream)
      localStorage.setItem('dreamId', this.selectedDreamId)
      this.newTask.dreamId = this.selectedDreamId
      
      // 重新加载当前梦想的任务
      const savedTasks = localStorage.getItem('tasks')
      if (savedTasks) {
        try {
          const allTasks = JSON.parse(savedTasks)
          this.dreams = allTasks.filter(task => String(task.dreamId) === String(this.selectedDreamId))
        } catch (e) {
          console.error('解析tasks数据失败:', e)
          this.dreams = []
        }
      } else {
        this.dreams = []
      }
      this.$forceUpdate()
    }
  },
  mounted() {
    this.currentDream = localStorage.getItem('dream') || ''
    const savedDreams = localStorage.getItem('dreams')
    if (savedDreams) {
      try {
        this.allDreams = JSON.parse(savedDreams)
      } catch (e) {
        console.error('解析dreams数据失败:', e)
        this.allDreams = []
      }
    } else {
      this.allDreams = []
    }
    this.selectedDreamId = localStorage.getItem('dreamId') || ''
    const savedTasks = localStorage.getItem('tasks')
    if (savedTasks) {
      try {
        const allTasks = JSON.parse(savedTasks)
        this.dreams = allTasks.filter(task => String(task.dreamId) === String(this.selectedDreamId))
      } catch (e) {
        console.error('解析tasks数据失败:', e)
        this.dreams = []
      }
    } else {
      this.dreams = []
    }
  }
}
</script>

<style scoped>
.task-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.header {
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
  padding: 20px;
}
.current-dream {
  font-style: italic;
}
.nav {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.nav a {
  text-decoration: none;
  color: #333;
}
.main-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}
.task-list {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
  border-radius: 5px;
  backdrop-filter: blur(5px);
}
.task-list ul {
  list-style: none;
  padding: 0;
}
.task-list li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.task-input {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.input-group label {
  font-size: 14px;
  color: #555;
}
.task-input input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.footer {
  text-align: center;
  padding: 10px;
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
}
</style>